<!-- 用户信息页面 -->
<template>
  <view>
		<!-- 信号栏变色 -->
		<view class="nav" :style="'background-color: rgba(0, 0, 0,' + op +')'">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
		</view>
    <view class="container">
      <view class="header-container" :style="'padding-top:'+ (titletop+titleheight+90)+'px'">
        <!-- 返回 -->
        <view class="top-avatar-logo" :style="'top:'+ (titletop+titleheight+16)+'px'">
          <view class="top-tip-container">
            <view class="slogan">
              <view class="logo">
                <image src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/14101096311/a0e9/0738/e8fe/d82273dce79c2b3a9eb1c2fc160f16b1.png?imageView=1&thumbnail=84x0" alt="" />
              </view>
              <view class="names">
                <view>网易云音乐</view>
                <view>相信音乐的力量</view>
              </view>
            </view>
            <view class="btn" @click="gotoHome">回到首页</view>
          </view>
        </view>
        <!-- 用户头像 -->
        <view class="avatar">
          <image v-if="userinfo.avatarUrl" :src="userinfo.avatarUrl" alt="" />
          <image v-else src="http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg?imageView=1&type=webp&thumbnail=60x0" alt="" />
        </view>
        <!-- 用户昵称 -->
        <view class="nickname">
          <!-- 用户名字文本 -->
          <view class="nickname-text">{{ userinfo.nickname }}</view>
          <!-- 用户专属 -->
          <view class="user-expert" v-if="identityIconUrl">
            <image :src="identityIconUrl" alt="" />
          </view>
        </view>
        <!-- 用户粉丝 -->
        <view class="follow">
          <view>
            <span v-if="userinfo.follows">{{ num(userinfo.follows) }}</span>
            <span v-else>-</span>
            关注
          </view>
          <view>
            <span v-if="userinfo.followeds">{{ num(userinfo.followeds) }}</span>
            <span v-else>-</span>
            粉丝
          </view>
          <view>
            Lv.
            <span v-if="level">{{ level }}</span>
            <span v-else>-</span>
          </view>
        </view>
        <!-- 用户ip -->
        <view style="position: relative; width: 100%; display: flex; align-items: center; flex-direction: column">
          <view class="tags">
            <view class="tag left" v-if="userinfo.gender">
              <image v-if="userinfo.gender == 1" src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/17807794659/22e9/45d6/7d3c/2eb480b02cef445e083e5be1ee25c554.png" alt="" />
              <image v-if="userinfo.gender == 2" src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/17807866962/e1a4/8fd4/25fb/0a60e848077394b9a73f45497b1fb352.png" alt="" />
              {{ Userage(userinfo.birthday) }}
            </view>
            <view class="tag null" v-if="userinfo.createTime&&hides">村龄{{ Village(userinfo.createTime) }}年</view>
          </view>
          <view class="desc" v-if="userinfo.signature">
            <view class="desc-text" :class="hide ? 'hide' : ''">{{ userinfo.signature }}</view>
            <view class="icon" @click="hide = !hide" v-if="userinfo.signature.length > 20">
              <van-icon v-if="hide" name="arrow-down" />
              <van-icon v-else name="arrow-up" />
            </view>
          </view>
        </view>
      </view>
      <view class="content-container">
        <view class="tab-container" :class="!userinfo.nickname ? 'heth' : ''">
          <!-- 加载中 -->
          <view class="loading" v-if="!userinfo.nickname">
            <van-loading color="#1989fa" size="50px" />
          </view>
          <view v-else>
            <user-card ref="card"></user-card>
            <user-cards ref="cards"></user-cards>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UserCard from '@/components/UserCard.vue'
import { userInfoAPI } from '@/api'
import UserCards from '@/components/UserCards.vue'
import { numberFormat } from '@/utils/common';
export default {
  components: { UserCard, UserCards },
  data() {
    return {
      userId: '', //获取当前页面路由id值
      userinfo: {}, //用户信息
      level: '', //用户等级
      identityIconUrl: '', //用户专属
      hide: true, //个性签名显示与隐藏
      hides: true,//村龄的显示与隐藏
			
			op: 0,
			titletop: 0,
			titleheight: 0,
			statusBarHeight: 0,
    }
  },
	computed: {
		//格式化数字
		num() {
			return (val) => {
				return numberFormat(val);
			};
		}
	},
	onLoad(option) {
		this.userId = option.id
    this.UserInfo()
		// 调用APP中的数据
		getApp().getHeight();
		this.titletop = getApp().titletop;
		this.titleheight = getApp().titleheight;
		this.statusBarHeight = getApp().statusBarHeight;
	},
	onPageScroll(res) {
		let top = res.scrollTop
		let height = this.statusBarHeight + 44
		if (top <= height) {
			this.op = Math.round(top / height * 100) / 100
		} else {
			this.op = 1
		}
	},
  methods: {
    //获取当前用户信息
    UserInfo() {
      userInfoAPI(this.userId).then((res) => {
        this.userinfo = res.profile
        this.level = res.level
        this.identityIconUrl = res.profile.avatarDetail.identityIconUrl
				this.$nextTick(()=>{
					this.$refs.card.userId = this.userId
					this.$refs.card.userSongList()
					this.$refs.cards.userId = this.userId
					this.$refs.cards.userSongList()
				})
      })
    },
    //村龄
    Village(val) {
      if (val == -1) {
        this.hides = false
      }
      //当前时间
      let time = new Date()
      //注册时间
      let previous = new Date(val)
      if (time.getMonth() < previous.getMonth()) {
        return time.getFullYear() - previous.getFullYear() - 1
      } else {
        return time.getFullYear() - previous.getFullYear()
      }
    },
    //用户年龄
    Userage(val) {
      let time = new Date(val)
      let times = ''
			// 计算年龄
      if (time.getFullYear() > 2010) {
        times = '10后'
      } else if (time.getFullYear() > 2000) {
        times = '00后'
      } else if (time.getFullYear() > 1995) {
        times = '95后'
      } else if (time.getFullYear() > 1990) {
        times = '90后'
      } else if (time.getFullYear() > 1980) {
        times = '80后'
      } else if (time.getFullYear() > 1970) {
        times = '70后'
      } else if (time.getFullYear() > 1960) {
        times = '60后'
      } else if (time.getFullYear() > 1950) {
        times = '50后'
      } else if (time.getFullYear() > 1940) {
        times = '40后'
      } else if (time.getFullYear() > 1930) {
        times = '30后'
      } else if (time.getFullYear() != 1900) {
				times = '百岁长者'
			}
			// 计算星座
      let days = time.getMonth() + '.' + time.getDay()
      if (days >= 1.2 && days < 2.18) {
        return times + ' 水瓶座'
      } else if (days >= 2.19 && days < 3.2) {
        return times + ' 双鱼座'
      } else if (days >= 3.21 && days < 4.2) {
        return times + ' 白羊座'
      } else if (days >= 4.21 && days < 5.21) {
        return times + ' 金牛座'
      } else if (days >= 5.22 && days < 6.21) {
        return times + ' 双子座'
      } else if (days >= 6.22 && days < 7.22) {
        return times + ' 巨蟹座'
      } else if (days >= 7.23 && days < 8.23) {
        return times + ' 狮子座'
      } else if (days >= 8.24 && days < 9.23) {
        return times + ' 处女座'
      } else if (days >= 9.24 && days < 10.23) {
        return times + ' 天平座'
      } else if (days >= 10.24 && days < 11.22) {
        return times + ' 天蝎座'
      } else if (days >= 11.23 && days < 12.21) {
        return times + ' 射手座'
      } else if (days >= 12.22 && days < 1.2) {
        return times + ' 魔羯座'
      } else {return times}
    },
		gotoHome(){
			uni.navigateTo({
				url:'/pages/Home'
			})
		}
  },
}
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}
.container {
  background-color: #f2f2f2;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  .header-container {
    width: 100%;
    border-radius: 0 0 2.66666667vw 2.66666667vw;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    // padding-top: 40vw;
    padding-bottom: 4.26666667vw;
		background: linear-gradient(rgba(51, 50, 47, 0.3) 0%, rgba(51, 50, 47, 0.016) 100%), rgb(255, 255, 255);
		.top-avatar-logo{
			position: fixed; 
			left: 50%; 
			transform: translateX(-50%); 
			z-index: 10
		}
    .top-tip-container {
      box-sizing: border-box;
      width: 91.46666667vw;
      height: 13.33333333vw;
      background: hsla(0, 0%, 100%, 0.6);
      backdrop-filter: blur(50px);
      box-shadow: 0 1px 8vw rgba(0, 0, 0, 0.06);
      border-radius: 21.33333333vw;
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      padding: 2.66666667vw;
      transform: translateZ(0);
      .slogan {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        .logo {
          width: 7.46666667vw;
          height: 7.46666667vw;
          -webkit-box-pack: center;
          justify-content: center;
          margin-right: 1.6vw;
          display: flex;
          align-content: center;
          > image {
            width: 100%;
            height: 100%;
          }
        }
        .names {
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
          -webkit-box-align: start;
          align-items: flex-start;
          -webkit-box-pack: center;
          justify-content: center;
          font-weight: 500;
          font-size: 3.73333333vw;
          line-height: 4.53333333vw;
          color: #000;
          > view:not(:first-of-type) {
            margin-top: 0.8vw;
            font-weight: 400;
            font-size: 2.93333333vw;
            line-height: 3.46666667vw;
            color: #000;
            opacity: 0.6;
          }
        }
      }
      .btn {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 21.33333333vw;
        font-style: normal;
        font-weight: 500;
        font-size: 3.73333333vw;
        line-height: 4.53333333vw;
        color: #333;
        padding: 1.6vw 4.53333333vw 1.86666667vw 4.26666667vw;
      }
    }
    .avatar {
      width: 18.66666667vw;
      height: 18.66666667vw;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f2f2f2;
      filter: drop-shadow(0 0 3.2vw rgba(0, 0, 0, 0.1));
      transform: translateZ(0);
      > image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .nickname {
      width: 80.8vw;
      margin-top: 2.66666667vw;
      overflow: hidden;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: nowrap;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      justify-content: center;
      .nickname-text {
        min-height: 6.93333333vw;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 500;
        font-size: 5.33333333vw;
        line-height: 6.4vw;
        color: #000;
      }
      .user-expert {
        width: 5.33333333vw;
        margin-left: 1.86666667vw;
        > image {
          width: 20px;
          height: 20px;
          object-fit: contain;
        }
      }
    }
    .follow {
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      margin-top: 1.33333333vw;
      > view {
        min-height: 4.53333333vw;
        height: 100%;
        font-weight: 400;
        padding: 0 2.66666667vw;
        position: relative;
        font-style: normal;
        font-size: 3.46666667vw;
        line-height: 4.26666667vw;
        color: #888;
        > span {
          min-height: 4.53333333vw;
          height: 100%;
          font-weight: 400;
        }
      }
      > view:not(:last-of-type):after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 2.66666667vw;
        width: 0.5px;
        background: rgba(0, 0, 0, 0.1);
      }
    }
    .tags {
      margin-top: 2.66666667vw;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      min-height: 5.86666667vw;
      .tag {
        height: 5.86666667vw;
        padding: 1.06666667vw 1.6vw;
        background: hsla(0, 0%, 100%, 0.8);
        border: 0.33px solid rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        border-radius: 1.6vw;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        font-size: 3.46666667vw;
        > image {
          width: 3.2vw;
          height: 3.2vw;
        }
      }
      .left {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        > image {
          margin-right: 0.53333333vw;
        }
      }
      > view:not(:first-of-type) {
        margin-left: 1.6vw;
      }
    }
    .desc {
      margin-top: 1.6vw;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-pack: center;
      justify-content: center;
      max-width: 77.33333333vw;
      -webkit-box-align: center;
      align-items: center;
      overflow: hidden;
      flex-wrap: nowrap;
      .desc-text {
        -webkit-box-flex: 1;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        font-style: normal;
        font-weight: 400;
        font-size: 3.46666667vw;
        line-height: 4.26666667vw;
        color: #000;
        opacity: 0.4;
      }
      .hide {
        white-space: nowrap;
      }
      .icon {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 2.93333333vw;
        height: 1.86666667vw;
        margin-left: 0.53333333vw;
        ::v-deep .van-icon {
          color: black;
          opacity: 0.4;
        }
      }
    }
  }
  .content-container {
    width: 100vw;
    flex: 1;
    display: flex;
    background-color: #fff;
    border-radius: 2.66666667vw 2.66666667vw 0 0;
    margin-top: 2.66666667vw;
    .tab-container {
      width: 100%;
      position: relative;
      z-index: 0;
      .loading {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%) translateY(100%);
      }
    }
    .heth {
      height: 444px;
    }
  }
}
</style>